﻿<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="/static/plugins/ysflow/demo2/diagramflow.js"></script>
</head>
<body>
    
 
    <div style="position:relative;width:1000px;height:500px; border: solid 1px;">
        <canvas id="myCanvas" width="1000" height="800" tabindex="1"></canvas>
    </div>
    <div id="divSelectedNode"></div>
    <button type="button" onclick="doAdd();">添加</button>

    <script>
        var Figures = {
            Rectangle: function (ctx, node) {
                ctx.beginPath();
                ctx.fillStyle = node.fillStyle;
                ctx.strokeStyle = "blue";
                ctx.fillRect(node.x, node.y, node.w, node.h);
                ctx.fillStyle = "black";
                ctx.font = "10px Verdana";
                ctx.textBaseline = "top";
                node.textfill(ctx);
            },
            Circle: function (ctx, node) {
                ctx.beginPath();
                ctx.fillStyle = node.fillStyle;
                ctx.ellipse(node.x + node.w / 2, node.y + node.h / 2, node.w / 2, node.h / 2, 0, 0, 2 * Math.PI);
                ctx.fill();
                node.textfill(ctx);
            },
            Diamond: function (ctx, node) {
                ctx.beginPath();
                ctx.fillStyle = node.fillStyle;
                ctx.moveTo(node.x, node.y + node.h / 2);
                ctx.lineTo(node.x + node.w / 2, node.y);
                ctx.lineTo(node.x + node.w, node.y + node.h / 2);
                ctx.lineTo(node.x + node.w / 2, node.y + node.h);
                ctx.fill();
                node.textfill(ctx);
            }
        }

        var anchors = model.defaultAnchors("Rectangle");
        //model.addNode(new model.node(10, 10, 100, 100, anchors, "一个正方形，点击可以编辑", "green", "Rectangle"));
        anchors = model.defaultAnchors("Circle");
        model.addNode(new model.node(30, 140, 50, 50, anchors, "开始", "gray", "Circle"));
        model.addNode(new model.node(100, 140, 50, 50, anchors, "结束", "gray", "Circle"));
        anchors = model.defaultAnchors("Rectangle");
        model.addNode(new model.node(250, 80, 100, 100, anchors, "条件", "yellow", "Diamond"));
        model.addNode(new model.node(350, 250, 100, 50, anchors, "任务", "Cyan", "Rectangle"));

        //model.addLink(new model.link(1, 2, 7, 3, "双击可以编辑"));
     
        //model.addLink(new model.link(2, 3, 1, 1, "链接 2"));

        model.init("myCanvas");
        model.draw();

       
        document.addEventListener("selectionChanged", function (e) {
        	console.log(e);
            document.all("divSelectedNode").innerText = "Selected node:" + e.detail;
        });

        function doAdd() {
            var anchors = model.defaultAnchors("Rectangle");
            model.addNode(new model.node(350, 250, 100, 50, anchors, "任务", "Cyan", "Rectangle"));

            model.init("myCanvas");
            model.draw();
        }
    </script>
    
</body>
</html>
